Application Cache

Description

Properties for configuring the UX Component to use the Application Cache for building offline web applications.

Name: Description
Create a static HTML page with an Application Cache: Specify if a static HTML page should be created for the UX Component. The page will define an application cache so that it can be loaded (after its initial load) even if there is no connection to the server.
Static HTML page name: The filename for the static HTML page created for Application Cache.
Page title: Specify the page title for the static HTML page shown in the title bar in the web browser.
Page head section: Allows custom markup to be added to the head section of the UX Component's static HTML page stored in the Application Cache.
Javascript - cacheError: Fires if there was an error loading the Application Cache. If an error occurs, the UX Component will not be rendered.
Javascript - cacheProgress: Fires while the files stored in the Application Cache are being downloaded. Allows you to display a progress message to the user.
Javascript - updateReady: Fires when the updates to the cached files have been succesfully downloaded.

Building Offline HTML5 Applications

Offline enabled HTML pages can be loaded into a browser even if no internet connection is available.

To turn on this feature, click the smart field for the Create a static HTML page with an application cache property, as shown in the image below.

When this property is checked, when you save the UX component, a special sub-directory in the Web Project folder is created. This directory is called StaticHTMLFileset and it contains the static HTML page with the rendered UX component and all of the files referenced by this page (e.g. Javascript, CSS and image files). The directly also contains an application manifest file which lists all of the files reference by the static HTML page. The application manifest file is linked in the head of the static HTML page by specifying a value for the manifest attribute in the <html> tag. For example:

<html manifest="cache_myuxcomponent.appmanifest">

Application Cache can be turned on in a UX Component by checking the Create a static HTML page with an application cache property

When a static HTML page that includes a manifest is loaded, all of the files listed in the manifest are stored in the browser's ApplicationData storage area.

When a static HTML page is loaded, the browser checks to see if a cached version of the page and all of the files it references exists in the browser's ApplicationData storage area. If so, the page is loaded from the ApplicationData storage area. To determine if the cached version is stale or not, but browser will attempt to contact the server (if an internet connection is available) to check if a newer version of the manifest is available.

If a newer manifest is available, the browser will download and cache the new version of the static HTML page and its referenced files.

While the browser is downloading files listed in the manifest, a series of events will fire. You can specify event handlers for these events in your UX component.

When you click the smart field for the Create a static HTML page with an application cache property, you can automatically generate default code for the error, updateready and progress Application Cache events.